// 事件的使用
import React, { Component } from 'react'


// export default class App4 extends Component {
//     // 点击事件
//     handleClick() {
//         console.log('点击了按钮');
//     }
//     // 实例方法
//     render() {
//         return (
//             <div>
//                 <button onClick={this.handleClick}>按钮</button>
//             </div>
//         )
//     }
// }


//  实现累加功能
export default class App4 extends Component {
    // 构造函数
    constructor(props) {
        super(props)
        // 定义一个组件的状态数据
        this.state = { num: 20 }
    }
    // 点击事件
    handleClick() {
        // console.log('点击了按钮');
        // 调用状态方法: 修改state状态的数据
        this.setState({
            num: this.state.num+1
        })
    }
    // 实例方法
    render() {
        return (
            <div>
                <p>{this.state.num}</p>
                <button onClick={this.handleClick.bind(this)}>按钮</button>
            </div>
        )
    }
}
